/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2019-06-21 17:41:50
 * @Description: 首页-控制台-我的添加
 */
 @import "@/assets/style/global.scss";

@mixin topIcon($item-name: gkyj_yjzsl) {
    &.#{$item-name}-icon {
        background: url('../images/'+ $item-name +'.png') no-repeat center;
        background-size: 100% 100%;
    }
}

.my-addition {
    width: 80%;
    margin: 0 auto;
    .top-num-list {
        margin-top: 0;
        display: flex;

        li {
            display: flex;
            align-items: center;
            margin-right: 200px;

            .icon {
                width: 32px;
                height: 36px;
                @include topIcon(wdtj_dx);
                @include topIcon(wdtj_rq);
            }

            .detail {
                font-size: 12px;
                margin-left: 10px;

                .value {
                    color: $yellow;
                    font-size: 16px;
                    margin-bottom: 6px;
                }

                .name {
                    color: $gray;
                    font-size: 14px;
                }
            }
        }
    }
    .lists-data {
        width: 100%;

        li {
            width: 100%;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            $height: 50px;
            height: $height;
            line-height: $height;
            border-bottom: 1px solid #2c3a3f;

            &:first-child {
                border-bottom: none;
            }

            span {
                text-align: center;
                display: block;
                width: 26%;
                &:first-child,
                &:last-child{
                    width: 10%;
                }
            }

            .type{
                position: relative;
                &.type-object{
                    background: url(../images/wdtj_object.png) no-repeat 38% 50%;
                    background-size: auto 56%;
                    &:after{
                        content: '关联对象';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        margin-left: 20px;
                    }
                }
                &.type-person {
                    background: url(../images/wdtj_person.png) no-repeat 38% 50%;
                    background-size: auto 56%;
                    &:after {
                        content: '使用人员';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        margin-left: 20px;
                    }
                }
            }
            .btn {
                color: $blue;
                background: none;
                border: none;
                outline: none;
                cursor: pointer;
            }
        }
    }
}

